<template>
  <view class="page">
    <view class="search-container">
      <uni-search-bar
        v-model="searchValue"
        placeholder="请输入您的地址"
        :radius="100"
        @input="handleSearch"
        @cancel="handleClearSearch"
        @clear="handleClearSearch">
      </uni-search-bar>
      <view class="place-tips-container">
        <view
          class="place-item"
          v-for="item in searchList"
          :key="item.id"
          @click="handleChangeAddress(item)">
          <view class="tit">{{ item.title }}</view>
          <view class="address">{{ item.address }}</view>
        </view>
      </view>
    </view>
    <view v-show="!searchList.length" class="map-container">
      <map
        style="width: 100%; height: 300px"
        :latitude="location.latitude"
        :longitude="location.longitude"
        show-location
        :markers="covers">
      </map>
    </view>
    <!-- <view>
      <uni-data-picker
        :localdata="cityData"
        popup-title="请选择区域"
        :map="cityDict"
        @change="handleChangeCity"></uni-data-picker>
    </view> -->
    <view v-show="!searchList.length" class="destination-container">
      <view
        v-for="item in parkInfoData"
        :key="item.id"
        class="destination-item"
        @click="previewDetail(item)">
        <image v-if="item.tps.length" :src="item.tps[0].url" class="logo" />
        <view v-else class="logo">暂无图片</view>
        <view class="content">
          <view class="tit">{{ item.title }}</view>
          <view class="tag-box">
            <view v-for="tag in tagList(item)" :key="tag" class="tag-item">
              {{ tag }}
            </view>
          </view>
          <view class="bottom-box">
            <view class="price">
              {{ '¥' + (item.prices || item.provisionaPrice) }}
            </view>
            <view>{{ item.distanceInKm + 'km' }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { regionList, parkInfoList } from '@/api/parkInfo';
import { debounce } from '@/common/util.js';
const QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');
const qqmapsdk = new QQMapWX({
  key: 'BUJBZ-VYVCL-HS7PK-MEU3Y-NXWGK-MLBDB',
});
export default {
  data() {
    return {
      location: {
        longitude: 0,
        latitude: 0,
      },
      covers: [],
      cityData: [],
      cityDict: { text: 'label', value: 'value' },
      queryParams: {
        limit: 10,
        page: 1,
        provinceId: null,
        cityId: null,
        countyId: null,
        currentZb: '',
      },
      parkInfoData: [],
      searchValue: '',
      searchList: [],
    };
  },

  methods: {
    handleChangeAddress(item) {
      this.location.longitude = item.location.lng;
      this.location.latitude = item.location.lat;
      this.parkInfoData = [];
      this.queryParams.page = 1;
      this.queryParams.currentZb = `${item.location.lng},${item.location.lat}`;
      this.searchValue = '';
      this.searchList = [];
      this.queryParkInfoList();
    },
    handleClearSearch() {
      this.searchList = [];
    },
    handleSearch() {
      if (!this.searchValue) {
        this.searchList = [];
        return;
      }
      qqmapsdk.getSuggestion({
        keyword: this.searchValue,
        region: '深圳',
        success: (res) => {
          this.searchList = res.data;
        },
      });
    },
    handleChangeCity(e) {
      const [province, city, county] = e.detail.value;

      this.queryParams.provinceId = province ? province.value : null;
      this.queryParams.cityId = city ? city.value : null;
      this.queryParams.countyId = county ? county.value : null;

      if (province && city && county) {
        this.parkInfoData = [];
        this.queryParams.page = 1;
        this.queryParkInfoList();
      }
    },
    tagList(item) {
      const list = item.sfmsText.split(',').concat(item.tclxText.split(','));
      return list;
    },
    queryRegionList() {
      uni.showLoading({
        title: '加载中',
      });
      regionList().then((res) => {
        this.cityData = res.data;
        console.log('this.cityData', this.cityData);
      });
    },
    queryParkInfoList() {
      if (this.searchList.length) {
        return;
      }
      parkInfoList(this.queryParams).then((res) => {
        this.parkInfoData = this.parkInfoData.concat(res.data.list);
        this.covers = this.parkInfoData.map((item) => {
          return {
            id: item.id,
            latitude: item.zb.split(',')[1],
            longitude: item.zb.split(',')[0],
            iconPath: '../../static/location.png',
          };
        });
        console.log('this.parkInfoData', this.parkInfoData);
      });
    },
    previewDetail(info) {
      uni.navigateTo({
        url: '/pages/placeDetail/index?id=' + info.id,
      });
    },
    getLocation() {
      uni.getLocation({
        success: (res) => {
          this.queryParams.currentZb = `${res.longitude},${res.latitude}`;
          this.location.longitude = res.longitude;
          this.location.latitude = res.latitude;
          this.queryParkInfoList();
        },
      });
    },
  },
  mounted() {
    // this.queryRegionList();
    this.getLocation();
    this.handleSearch = debounce(this.handleSearch, 280);
  },
  onReachBottom() {
    this.queryParams.page++;
    this.queryParkInfoList();
  },
};
</script>

<style lang="scss" scoped>
.page {
  .search-container {
    position: relative;
    background: white;
    .place-tips-container {
      padding: 0 12px;
      position: absolute;
      z-index: 999;
      background: white;
      .place-item {
        display: flex;
        flex-direction: column;
        border-bottom: solid 1px #f0f0f0;
        padding: 12px 0;
        line-height: 1;
        .tit {
          font-size: 15px;
          font-weight: 700;
        }
        .address {
          color: #878787;
          margin-top: 7px;
        }
      }
    }
  }
  .destination-container {
    margin-top: 16rpx;

    .destination-item {
      padding: 16rpx;
      background: white;
      border-radius: 10rpx;
      display: flex;
      flex-direction: row;
      margin-bottom: 10rpx;

      .logo {
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }

      .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;

        .tit {
          font-weight: 700;
        }

        .tag-box {
          display: flex;
          margin: 10rpx 0;

          .tag-item {
            padding: 4rpx 16rpx;
            border-radius: 8rpx;
            color: white;
            font-size: 12px;
            background: #18bc37;
            margin-right: 8rpx;
          }
        }

        .bottom-box {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
